<template>
    <div>
        <stopbanner></stopbanner>

        <!--标签  pc-->
        <div class="join-box">
            <Tabs value="name1">
                <TabPane label="加盟优势" name="name1">
                    <youshi></youshi>
                </TabPane>
                <TabPane label="加盟支持" name="name2">
                    <zhichi></zhichi>
                </TabPane>
                <TabPane label="加盟模式" name="name3">
                    <moshi></moshi>
                </TabPane>
                <TabPane label="加盟流程" name="name4">
                    <liucheng></liucheng>
                </TabPane>
            </Tabs>
        </div>

        <commonFooter></commonFooter>

    </div>
</template>

<script>
    import stopbanner from "@/components/stopbanner/stop";
    import moshi from "@/components/join/moshi"
    import youshi from "@/components/join/youshi"
    import liucheng from "@/components/join/liucheng"
    import zhichi from "@/components/join/zhichi"
    import commonFooter from "@/components/footerCom/commonFooter"

    export default {
        data() {
            return {
                selected: "1",
            }
        },
        methods: {
            scrollFixed() {
                var titleTop = $('.my-nav').offset().top;
                console.log(titleTop)
                $(document).on('scroll', function () {
                    // console.log($(document).scrollTop())
                    if ($(document).scrollTop() > titleTop) {
                        $(".my-nav").addClass("box-active")
                    } else {
                        $('.my-nav').removeClass("box-active")
                    }
                })
            }
        },
        created() {

        },
        mounted() {
            // this.scrollFixed()
        },
        components: {
            stopbanner,
            moshi,
            youshi,
            liucheng,
            zhichi,
            commonFooter
        }

    }
</script>

<style lang="less">
    /*标签页*/
    /*大盒子*/
    .join-box {
        /**/

        .ivu-tabs {

        }

        .ivu-tabs-nav-scroll {
            width: 952px;
            margin: 0 auto;
        }

        .nav-text.ivu-tabs-nav {
            width: 952px;
            margin: 0 auto;
            /*display: flex;*/
            /*justify-content: center;*/
        }

        /*标签页的每一项*/

        .ivu-tabs-tab {
            /*flex: 1;*/

            &:nth-of-type(2),
            &:nth-of-type(3),
            &:nth-of-type(4) {
                margin-right: 159px;
            }

            width: 120px;
            height: 94px;
            line-height: 94px;
            text-align: center;
            margin: 0;
            padding: 0;
            font-size: 26px;
        }

        /*原来当前的边框底色设置为透明*/

        .ivu-tabs-ink-bar {
            background-color: transparent;
        }

        /*现在当前选中的边框底色*/

        .ivu-tabs-tab-active.ivu-tabs-tab-focused {
            border-bottom: 3px solid #a30808 !important;
        }

        .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
            /*border-color: transparent!important;*/
        }

        /*当前文字的底色*/

        .ivu-tabs-nav .ivu-tabs-tab-active {
            color: #333;
        }

        /*文字底色*/

        .ivu-tabs-nav .ivu-tabs-tab:hover {
            color: #333 !important;
        }

        .ivu-tabs-tab-active.ivu-tabs-tab-focused {
            color: #a30808 !important;
        }

        .ivu-tabs-tabpane {
            &:nth-of-type(1) {
                padding-bottom: 45px;

                .tab1 {
                    padding: 0;
                    margin-top: 50px;
                    width: 1045px;
                    height: 215px;
                    background-color: #ffffff;
                    box-shadow: 0 3px 40px 0 rgba(76, 76, 76, 0.38);


                    /*开业优惠*/

                    .opening {
                        /*padding-right: 77px;*/
                        /*左边图片*/

                        .opening-img {
                            float: left;
                            width: 362px;
                            height: 189px;
                            background-color: #ff5d64;
                            margin-top: 14px;
                            margin-left: 9px;
                            margin-right: 54px;
                        }

                        /*右边文字*/

                        .opening-word {
                            float: left;
                            width: 554px;
                            /*height: 189px;*/
                            /*background-color: #ffa34b;*/
                            margin-top: 32px;

                            .opening-word-title {
                                font-size: 28px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 14px;
                                letter-spacing: 3px;
                                color: #333333;
                            }

                            .opening-word-content {
                                font-size: 20px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 36px;
                                letter-spacing: 0px;
                                color: #333333;
                                margin-top: 30px;
                                margin-bottom: 30px;
                            }

                            .opening-word-time {
                                font-size: 18px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 36px;
                                letter-spacing: 0px;
                                color: #999999;
                            }
                        }
                    }

                    /*新闻列表*/

                    .news-list {
                        margin-top: 49px;
                        width: 1045px;
                        /*background-color: pink;*/

                        .news-list-item {

                            height: 149px;
                            margin-bottom: 65px;

                            /*当前鼠标所在的一项 （鼠标经过的样式）*/

                            &:hover {
                                background-color: #fff;
                                box-shadow: 0px 3px 40px 0px rgba(76, 76, 76, 0.38);

                                .news-list-item-time {
                                    cursor: pointer;
                                    background-color: #c50009;

                                    p {
                                        color: #fff;

                                        &:nth-of-type(1) {

                                        }

                                        &:nth-of-type(2) {

                                        }
                                    }
                                }
                            }

                            /* 单独为第一项设置的样式 */

                            .news-list-item-active {
                                background-color: #fff;
                                box-shadow: 0px 3px 40px 0px rgba(76, 76, 76, 0.38);

                                .news-list-item-time {
                                    cursor: pointer;
                                    background-color: #c50009;

                                    p {
                                        color: #fff;

                                        &:nth-of-type(1) {

                                        }

                                        &:nth-of-type(2) {

                                        }
                                    }
                                }
                            }


                            /*左边日期*/

                            .news-list-item-time {
                                cursor: pointer;
                                float: left;
                                width: 118px;
                                height: 115px;
                                border: 1px solid #c50009;
                                margin-top: 14px;
                                margin-right: 36px;

                                p {
                                    color: #c50009;

                                    &:nth-of-type(1) {
                                        font-size: 45px;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        line-height: 27px;
                                        letter-spacing: 0px;
                                        opacity: 0.9;
                                        text-align: center;
                                        margin-top: 26px;
                                    }

                                    &:nth-of-type(2) {
                                        font-size: 20px;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        line-height: 27px;
                                        letter-spacing: 0px;
                                        opacity: 0.9;
                                        text-align: center;
                                        margin-top: 10px;
                                    }
                                }
                            }

                            /*右边文字*/

                            .news-list-item-word {
                                cursor: pointer;
                                padding-top: 40px;
                                width: 888px;
                                height: 100%;
                                /*background-color: #4cae4c;*/
                                float: left;

                                p {
                                    font-weight: normal;
                                    font-stretch: normal;
                                    color: #333333;

                                    &:nth-of-type(1) {
                                        font-size: 28px;
                                        line-height: 14px;
                                        letter-spacing: 3px;
                                        margin-bottom: 23px;

                                    }

                                    &:nth-of-type(2) {
                                        font-size: 20px;
                                        line-height: 36px;
                                        letter-spacing: 0px;

                                    }
                                }
                            }
                        }
                    }
                }
            }

            &:nth-of-type(2) {

            }
        }
    }
</style>